<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="snap.svg.js"></script>
</head>
<body>
    <svg id="svg" width="400" height="400" viewBox="0 0 250 250">
        <defs>
            <radialGradient id="g1">
                <stop offset=".2" stop-color="#fff" stop-opacity="1"/>
                <stop offset=".8" stop-color="#000" stop-opacity="1"/>
            </radialGradient>
        </defs>
    </svg>

    <svg id="svg2" width="400" height="400" viewBox="0 0 100 100">
        
    </svg>
    <script>
        // const svg = Snap('#svg');
        // // 开始态
        // var path = svg.paper.path({d: 'M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500',stroke:'#f00', fill: 'rgba(0,0,0,0)'});
        // setTimeout(function() {
        //     // 终止态：曲线变直
        //     // path.animate({d: 'M1,100 L350,100'}, 1000, mina.easeout(), function() {
        //     //     console.log('animation end');
        //     // });
        //     // 终止态：心形
        //     path.animate({d: 'M114.500,58.500 C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483 111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580 220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500 C160.455,-5.800 122.344,58.262 114.500,58.500 Z'}, 1000, mina.easeout(), function() {
        //         console.log('animation end');
        //     });
        // }, 1000);
    </script>

    <script>
        // const svg = Snap('#svg');
        // const circle = svg.circle(50,50,30);
        // circle.attr({
        //     fill:'#fac',
        //     stroke:'#00f'
        // });
        // const path = svg.path('M0 0 H 100 V 100 H 0 Z');
        // path.attr({
        //     fill:'none',
        //     stroke:'#ccc',
        //     'stroke-width':2
        // });
        (()=>{
            const svg = Snap('#svg');
            const d1 = 'M0 50 Q50 0 ,100 50Q50 100,0 50' ;
            const d2 = 'M0 50 Q50 50 ,100 50Q50 50,0 50' ;
            const eye = svg.path(d1);
            eye.attr({
                fill:'none',
                stroke:'#000'
                
            });
            const ball = svg.circle(50,50,30);
            ball.attr({
                clipPath:eye,
                fill:'url(#g1)'
            });
            const eye2 = eye.clone();
            svg.add(eye2);
            
            const g = svg.g(ball,eye2);
            const g2 = g.clone();
            g2.attr({
                transform:'translate(120)'
            });
            const eye3 = g2.select('path');
            const arr = [eye,eye2,eye3];
            
            function blink(){
                setInterval(()=>{
                    arr.forEach((e,i)=>{
                        e.animate({d:d2},400,function(){
                            this.animate({d:d1},400);
                        });
                    })
                },2000);
            }
            blink();
        })();
    </script>

    <script>
        const data = {
            values:[60,60,70,80,90],
            text:['阿里','京东','字节','百度','腾讯']
        }
        const colors = ['#fac','#afc','#acf','#f66','#66f'];
        const sum = data.values.reduce((v1,v2)=>{return v1+v2;});
        const lastDegs = (new Array(5)).fill(0) ;
        const degs = data.values.map(v=>360 * v/sum);
        const svg = Snap('#svg2');
        const r1 = 20 ;//小半径
        const r2 = 40 ;//大半径
        const r3 = 25 ;//文字半径
        const origin = {x:50,y:50};

        (()=>{
            
            function draw(){
                svg.clear();
                let f = true ;
                data.values.forEach((e,i)=>{
                    let startDeg = 0;
                    let lastDeg = lastDegs[i] + degs[i]/40;
                    if(lastDeg >=degs[i]){
                        lastDeg = degs[i];
                        f = false ;
                    }
                    lastDegs[i] = lastDeg ;
                    if(i > 0){
                        const before = lastDegs.slice(0,i).reduce((v1,v2)=>v1+v2);
                        startDeg += before ;
                        lastDeg += before ;
                    }
                    
                    let a = (lastDeg-startDeg) > 180?1:0;
                    let d = `M${origin.x+Snap.sin(startDeg)*r1} ${origin.y-Snap.cos(startDeg)*r1}`;
                    d+=`L${origin.x+Snap.sin(startDeg)*r2} ${origin.y-Snap.cos(startDeg)*r2}`;
                    d+=`A${r2} ${r2} 0 ${a} 1 ${origin.x+Snap.sin(lastDeg)*r2} ${origin.y-Snap.cos(lastDeg)*r2}`
                    d+=`L${origin.x+Snap.sin(lastDeg)*r1} ${origin.y-Snap.cos(lastDeg)*r1}`
                    d+=`A${r1} ${r1} 0 ${a} 0 ${origin.x+Snap.sin(startDeg)*r1} ${origin.y-Snap.cos(startDeg)*r1}`
                    const path = svg.path(d).attr({fill:colors[i],stroke:'#000'});

                    const part = (lastDeg - startDeg)/3
                    startDeg +=  part ;
                    lastDeg -= part ;
                    a = (lastDeg-startDeg) > 180?1:0;
                    d = `M${origin.x+Snap.sin(startDeg)*r3} ${origin.y-Snap.cos(startDeg)*r3}`;
                    d+=`A${r3} ${r3} 0 ${a} 1 ${origin.x+Snap.sin(lastDeg)*r3} ${origin.y-Snap.cos(lastDeg)*r3}`
                    const path2 = svg.path(d).attr({fill:'none',stroke:'none'});
                    const len = path2.getTotalLength();
                    svg.text(0,0,data.text[i]).attr({textpath:path2,fontSize:4,textLength:len});
                });

                if(f){
                    requestAnimationFrame(draw);
                }
            }

            requestAnimationFrame(draw);

        })();
    </script>
</body>
</html>